<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-12 14:31:04
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-20 10:35:08
 * @FilePath: /oms-ui/src/components/FooterMenu/index.vue
 * @Description: Lot Home Footer Menu
-->
<template>
  <div ref="footerMenu" class="footer-menu">
    <div class="menu-group special-menu-content">
      <div
        v-if="hasSpecialMenuScroll"
        class="indicator indicator-left"
        @click="handleLastPage"
      >
        <IconifyIconOffline :icon="ArrowLeft" />
      </div>
      <div
        ref="specialMenu"
        class="special-menu"
        :class="{ 'position-right': !hasSpecialMenuScroll }"
      >
        <template v-for="data in SPECIAL_MENU" :key="data.name">
          <FooterMenuItem :data="data" @menu-click="handleEmitMenuClick" />
        </template>
      </div>
      <div
        v-if="hasSpecialMenuScroll"
        class="indicator indicator-right"
        @click="handleNextPage"
      >
        <IconifyIconOffline :icon="ArrowRight" />
      </div>
    </div>
    <div class="menu-group basic-menu">
      <template v-for="(item, index) in BASIC_MENU" :key="index">
        <FooterMenuItem :data="item" @menu-click="handleEmitMenuClick" />
      </template>
    </div>
    <div class="menu-group operation-menu">
      <template v-for="(item, index) in OPERATION_MENU" :key="index">
        <FooterMenuItem :data="item" @menu-click="handleEmitMenuClick" />
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, type Ref, onMounted, onUnmounted } from "vue";
import { BASIC_MENU, SPECIAL_MENU, OPERATION_MENU } from "./config";
import FooterMenuItem from "./components/footer-menu-item.vue";
import ArrowLeft from "@iconify-icons/ep/arrow-left";
import ArrowRight from "@iconify-icons/ep/arrow-right";
import { MenuItem } from "./types";

//#region emit
interface Emits {
  (e: "menu-click", ...args: any[]): void;
}
const emit = defineEmits<Emits>();
//#endregion

// 滚动条位置
const scrollPosition: Ref<number> = ref(0);
// 是否有滚动条
const hasSpecialMenuScroll: Ref<boolean> = ref(false);

// 底部菜单dom
const footerMenu = ref(null);
// specialMenu Dom
const specialMenu = ref(null);

// 监听器 监听Footer Menu 的宽度变化
const resizeObserver = new ResizeObserver(() => {
  getHasSpecialMenuScroll();
});

// 上一页
const handleLastPage = () => {
  const size = Math.floor(specialMenu.value.clientWidth / 64);
  // 如果超出最大宽度 设置滚动的初始值
  if (
    scrollPosition.value >=
    specialMenu.value.scrollWidth - specialMenu.value.clientWidth
  ) {
    scrollPosition.value =
      specialMenu.value.scrollWidth - specialMenu.value.clientWidth;
  }
  // 还有滚动距离才滚动
  if (scrollPosition.value > 0) {
    // 每次滚动 只滚动最多展示的个数的宽度
    scrollPosition.value = scrollPosition.value - size * 64;
    specialMenu.value.scrollTo({
      left: scrollPosition.value,
      behavior: "smooth"
    });
  }
};

// 下一页
const handleNextPage = () => {
  const size = Math.floor(specialMenu.value.clientWidth / 64);
  if (scrollPosition.value < 0) {
    scrollPosition.value = 0;
  }
  // 每次滚动 只滚动最多展示的个数的宽度
  scrollPosition.value += size * 64;
  specialMenu.value.scrollTo({
    left: scrollPosition.value,
    behavior: "smooth"
  });
};

/**
 * @description 获取SPECIAL_MENU是否存在滚动条
 * @returns
 */

const getHasSpecialMenuScroll = () => {
  hasSpecialMenuScroll.value =
    specialMenu.value.scrollWidth > specialMenu.value.clientWidth;
};

const handleEmitMenuClick = (item: MenuItem) => {
  emit("menu-click", item);
};

onMounted(() => {
  resizeObserver.observe(specialMenu.value);
});

onUnmounted(() => {
  resizeObserver.disconnect();
});
</script>
<style lang="scss" scoped>
.footer-menu {
  display: flex;
  padding: 0;
  max-height: 84px;
  background: rgba(247, 247, 247, 1);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.16);
  margin-top: 12px;

  .menu-group {
    display: flex;

    &.basic-menu {
      &::before {
        content: "";
        height: 60px;
        width: 1px;
        background: #a4a5a5;
        margin: 14px 8px 0 8px;
      }
    }

    &.special-menu-content {
      display: flex;
      overflow: hidden;
      min-width: 168px;
      flex: 1;

      .special-menu {
        display: flex;
        flex: 1;
        overflow: hidden;

        &.position-right {
          .menu-group-item {
            &:first-child {
              margin-left: auto;
            }
          }
        }

        .el-carousel {
          width: 100%;
        }

        .el-carousel__item {
          display: flex;
        }
      }

      .indicator {
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &.indicator-left {
          box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.16);
        }

        &.indicator-right {
          box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.16);
        }
      }
    }

    &.operation-menu {
      &::before {
        content: "";
        height: 60px;
        width: 1px;
        background: #a4a5a5;
        margin: 14px 8px 0 8px;
      }
    }

    &.hide-line {
      &::before {
        display: none;
      }
    }
  }
}
</style>
